<template>
	<view class="content">
		<view class="apply-type" v-show="type == -2">
			<view class="apply-img">
				<image src="/static/member/res.png" mode="aspectFill"></image>
			</view>
			<view class="apply-tips">
				您的信息已提交成功！
			</view>
			<view class="apply-code">店铺号码： <text>{{store_no}}</text></view>
		</view>
		<view class="apply-type" v-show="type == 2">
			<view class="apply-img">
				<image src="/static/member/err.png" mode="aspectFill"></image>
			</view>
			<view class="apply-tips">
				您的申请被驳回
			</view>
			<view class="apply-code">店铺号码： <text>{{store_no}}</text></view>
			<view class="apply-tips-text colora">
				理由：{{close_info}}
			</view>
			<view class="apply-btn">
				<view class="btn" @click="restart" >
					重新申请
				</view>
			</view>
		</view>
		<view class="apply-type" v-show="type == 3">
			<view class="apply-img">
				<image src="/static/member/res.png" mode="aspectFill"></image>
			</view>
			<view class="apply-tips">
				信息补全成功,待审核
			</view>
			<view class="apply-code">店铺号码： <text>{{store_no}}</text></view>
			<view class="apply-tips-text">
				<!-- 请及时关注审核状态，我们将在3个工作日内对您的信息进行审核。 -->
			</view>
		
			<!-- <view class="apply-btn">
				<view class="btn" @click="download()" >
					下载附件
				</view>
			</view>
			<view class="apply-btn">
				<view class="btn" @click="clip()" >
					复制下载附件地址
				</view>
			</view> -->
			<!-- <view class="apply-btn">
				<view class="btn" >
					补全信息
				</view>
			</view> -->
		</view>
		<view class="apply-type" v-show="type == 0">
			<view class="apply-img">
				<image src="/static/member/res.png" mode="aspectFill"></image>
			</view>
			<view class="apply-tips">
				店铺号申请成功
			</view>
			<view class="apply-code">店铺号码： <text>{{store_no}}</text></view>
			<view class="apply-tips-text">
				<!-- 请及时关注审核状态，我们将在3个工作日内对您的信息进行审核。 -->
			</view>
		
			<!-- <view class="apply-btn">
				<view class="btn" @click="download()" >
					下载附件
				</view>
			</view>
			<view class="apply-btn">
				<view class="btn" @click="clip()" >
					复制下载附件地址
				</view>
			</view> -->
			<view class="apply-btn">
				<view class="btn" @click="supplement" >
					补全信息
				</view>
			</view>
		</view>
		<view class="apply-type" v-show="type == 1">
			<view class="apply-img">
				<image src="/static/member/res.png" mode="aspectFill"></image>
			</view>
			<view class="apply-tips">
				您的店铺已审核通过
			</view>
			<view class="apply-code">店铺号码： <text>{{store_no}}</text></view>
		</view>
		<view class="" v-show="type == 4">
			<view class="">
				<image class="apply-image" src="/static/ad.jpg" mode=""></image>
			</view>
			<view class="reservation-form">
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						门店名称     
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.title" class="uni-input" name="input" placeholder="请输入门店名称" />
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						简单介绍     
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.description" class="uni-input" name="input" placeholder="简单介绍下门店" />
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						联系人     
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.contact_name" class="uni-input" name="input" placeholder="您的称呼" />
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						手机号          
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.contact_mobile" class="uni-input" name="input" placeholder="您的手机号" />
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						邮件地址          
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.email" class="uni-input" name="input" placeholder="您的邮件地址" />
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						申请日期          
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" @click="showSinglePicker" v-model="pickerTimeText" class="uni-input" name="input" disabled placeholder="请选择申请日期" />
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						经营地区            
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" @click="showMulLinkageThreePicker" v-model="pickerText" class="uni-input" name="input" disabled placeholder="请选择经营地区" />
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						详细经营地址          
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.address" class="uni-input" name="input" placeholder="请输入经营详细地址" />
					</view>
				</view>  
				 <view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						所在社区          
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.community" class="uni-input" name="input" placeholder="请输入所在社区" />
					</view>
				</view>  
				 <view class="approve">
					<view class="">
						上传申请书  <text @click="openLi()" style="color: #f00; padding: 0 25rpx;">查看范例</text>  
					</view>
					<view class="approve-list flex">
						<view class="approve-btn" @click="openChooseImage('apply_form')">
							<image :src="data.apply_form ? data.apply_form : '/static/p03.png'"  mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="foot" @click="post">
				立即申请
			</view>
		</view>
		
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		 <mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		  @onConfirm="onTimeConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>
 
<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	
	export default {
		computed: {
		    ...mapState(['token','SystemInfo'])
		},
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			return {
				data: {
					"title":"",
					"description":"",
					"contact_name":"",
					"contact_mobile":"",
					"apply_time":"",
					"address":"",
					"province_id":"",
					"city_id":"",
					"area_id":"",
					"community":"",
					"email":"",
					"apply_form":""
				},
				cityPickerValueDefault: [0,0,0],
				themeColor: '#007AFF',
				pickerText: '',
				pickerTimeArray: [],
				pickerTimeText: '',
				date: '',
				level: 1,
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				type: 4,	// 	状态
				close_info: '',	// 理由
				store_no: '',	// 店铺号码
				item:{},
				store_annex: '', // 附件
				is_post: false
			}
		},
		onShow() {
			this.pickerTimeArray = this.getYear()
			this.pickerTimeText = this.pickerTimeArray[0].label
			this.data.apply_time = this.pickerTimeArray[0].label
			
			if(this.token)
			this.getStore()
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest','vuexUploadFile']),
			openLi(){
				uni.navigateTo({
					url: '/pages/page/page?id=6'
				});
			},
			// 复制
			clip(){
				if(!this.store_annex){
					return !1
				}
				uni.setClipboardData({
				    data: this.store_annex,
				    success: function () {
				       uni.showToast({
				       	icon: 'none',
				       	title: '复制成功',
				       	position:'bottom'
				       })	
				    }
				});
			},
			// 下载附件
			download(){
				if(!this.store_annex){
					return !1
				}
				uni.downloadFile({
				    url:  this.store_annex , //仅为示例，并非真实的资源
				    success: (res) => {
				        if (res.statusCode === 200) {
							uni.showToast({
								icon: 'none',
								title: '下载成功',
								position:'bottom'
							})	
				        }
				    },
					fail: (err) =>{
						uni.showToast({
							icon: 'none',
							title: '下载失败',
							position:'bottom'
						})	
					}
				});
			},
			getStore() {
				this.vuexRequest({
					url: '/api/addons/execute?route=store-apply/index&addon=o-s-mall-dist&access-token=' + this.token,
					method: 'POST',
					data: {},
					success: (res)  => {
						if(JSON.stringify(res.data.data) != '[]'){
							this.item = res.data.data
							this.type = res.data.data.status
							this.close_info = res.data.data.close_info
							this.store_no = res.data.data.store_no
							this.store_annex = res.data.data.store_annex
						}
					},
					fail: (err)  => {
					},
				})
			},
			onCancel(e) {
				console.log(e)
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onTimeConfirm(e) {	//	选择时间
				this.pickerTimeText = e.label
				this.data.apply_time = e.label
			},
			onConfirm(e) {		//	选择地区
				this.pickerText = e.label
				this.data.province_id = e.provincesCode
				this.data.city_id = e.cityCode
				this.data.area_id = e.areaCode
			},
			showSinglePicker() {
				this.pickerValueArray = this.pickerTimeArray
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker.show()
			},
			post() {
				if(this.is_post){
					return !1
				}
				uni.showLoading({
					title: '提交中'
				});
				this.is_post = true
				let data = this.data
				this.vuexRequest({
					url: '/api/addons/execute?route=store-apply/create&addon=o-s-mall-dist&access-token=' + this.token,
					method: 'POST',
					data: data,
					success: (res)  => {
						uni.showToast({
							icon: 'none',
							title: '提交成功',
							position:'bottom'
						})	
						uni.hideLoading()
						uni.navigateBack({
							
						})
					},
					fail: (err)  => {
						uni.hideLoading()
						this.is_post = false
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})		
					},
				})
			},
			getYear() {
				let dataArr = [];
				for (let i = 0; i < 190; i++) {
					const time = new Date(new Date().setDate((new Date().getDate() + i) - 7));
					const year = time.getFullYear();
					const month = `0${time.getMonth() + 1}`.slice(-2);
					const strDate = `0${time.getDate()}`.slice(-2);
					dataArr.push({
						"label":`${year}-${month}-${strDate}`,
						"value":`${year}-${month}-${strDate}`
					})
				}
				return dataArr
			},
			restart() {
				this.type = 4
			},
			supplement() {
				uni.navigateTo({
					url: '/pages/store/store-apply-supplement/store-apply-supplement?detailDate=' + encodeURIComponent(JSON.stringify(this.item))
				});
				
			},
			openChooseImage(type) {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success:  (res) => {
						this.Upload(res.tempFilePaths[0],type)
					}
				});
			},
			Upload(path,type) {
				uni.showLoading({
					title: '上传中'
				});
				this.vuexUploadFile({
					url: '/api/v2/file/images?access-token=' + this.token,
					name: 'file',
					filePath: path,
					formData: {},
					success: (res)  => {	
						uni.hideLoading()
						this.data[type] = res.data.data.url
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							position:'bottom'
						})
					},
					fail: (err)  => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
					},
				})
			}
		},
		onBackPress() {
		  if (this.$refs.mpvueCityPicker.showPicker) {
			this.$refs.mpvueCityPicker.pickerCancel();
			return true;
		  }
		  if (this.$refs.mpvuePicker.showPicker) {
		  	this.$refs.mpvuePicker.pickerCancel();
		  	return true;
		  }
		},
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel()
			}
		}
	}
</script>

<style>
	.apply-image{
		width: 750upx;
		height: 350upx;
	}
	.flex{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.po{
		position: relative;
	}
	.po:after{
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.uni-input{
		margin: 0;
	}
	.reservation-form-li{
		background: #FFFFFF;
		padding: 10upx 30upx;
	}
	.reservation-form-li-right{
		width: 75%;
	}
	.store-ad{
		width: 750upx;
		height: 356upx;
	}
	.reservation-form-li-radio{
		padding: 30upx;
	}
	.foot{
		position: fixed;
		bottom: 0;
		color: #FFFFFF;
		width: 100%;
		height: 100upx;
		background: #f54336;
		text-align: center;
		line-height: 100upx;
		z-index: 20;
	}
	.content{
		padding: 0 0 120upx 0;
	}
	.apply-img{
		text-align: center;
	}
	.apply-img image{
		width: 200upx;
		height: 200upx;
	}
	.apply-type{
		background: #FFFFFF;
		padding: 40upx;
	}
	.apply-tips{
		text-align: center;
		font-size: 34upx;
		padding: 20upx 0 0 0;
	}
	.apply-tips-text{
		text-align: center;
		color: #a7a7a7;
		font-size: 20upx;
		padding: 0 80upx;
	}
	.apply-btn{
		width: 90%;
		margin: 0 auto;
	}
	.apply-btn .btn{
		color: #FFFFFF;
		width: 100%;
		height: 100upx;
		background: #f54336;
		text-align: center;
		line-height: 100upx;
		z-index: 20;
		border-radius: 100upx;
		margin: 60upx 0;
	}
	.apply-code{
		text-align: center;
		padding: 10upx 0;
	}
	.apply-code text{
		color: #f54336;
	}
	
	.approve{
		background: #FFFFFF;
		margin: 0 ;
		padding: 20upx 30upx;
	}
	.approve-list{
		padding: 20upx 0upx;
	}
	.approve-btn{
		width: 424upx;
		height: 299upx;
		margin: 0 auto;
	}
	.approve-btn image{
		width: 424upx;
		height: 299upx;
	}
</style>
